<template>
    <div class="wrap" id="wrap">
        <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
            <div class="logGet">
                <!-- 头部提示信息 -->
                <div class="logD logDtip">
                    <p class="p1">欢迎登录</p>
                </div>
                <!-- 输入框 -->
                <div class="lgD">
                    <el-form-item label="账号" prop="userName">
                        <img src="../../static/img/user.jpg" width="25" height="25" alt=""/>
                        <el-input type="text" placeholder="输入用户名" v-model="form.userName"/>
                    </el-form-item>
                </div>
                <div class="lgD">
                    <el-form-item label="密码" prop="password">
                        <img src="../../static/img/password.jpg" width="25" height="25" alt=""/>
                        <el-input type="password" placeholder="请输入密码" v-model="form.password"/>
                    </el-form-item>
                </div>
                <div class="logC">
                    <a>
                        <button @click.prevent="refer('loginForm')">登 录</button>

                    </a>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script type="javascript">

export default {
    name: 'Index',
    data () {
        return {
            form: {
                userName: '',
                password: ''
            },
            // 表单验证，需要再el-form-item 元素中增加prop属性-
            rules: {
                userName: [
                    {required: true, message: '账号不能为空', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '密码不能为空', trigger: 'blur'}
                ]
            },
            // 对话框显示和隐藏
            dialogVisible: false
        }
    },
    mounted () {

    },
    methods: {
        refer (formName) {
            this.$refs[formName].validate((valid) => {
                debugger
                if (valid) {
                    debugger
                    // const info = {username: this.form.userName, password: this.form.password};
                    // localStorage.setItem('userInfo', JSON.stringify(info));
                    // this.$message.success("result.data.data")
                    // 使用 vue-router路由到指定页面，该方式称之为编程式导航
                    // this.$router.replace("/index");
                    this.loginInfo()
                } else {
                    this.dialogVisible = true
                    return false
                }
            })
        },
        loginInfo () {
            this.$router.replace('/index')
        }
    }
}
</script>

<style>

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background-image: url(../../static/img/backgroundPicture.jpg);
    background-size: cover;
    background-position: center;
    font: 14px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
    color: #4d4d4d;
/ / 这个属性可以使页面上的字体抗锯齿, 使用后字体看起来会更清晰舒服
-webkit-font-smoothing: antialiased;
    font-weight: 300;
}

* {
    margin: 0;
    padding: 0;
}

#wrap {
    height: 600px;
    width: 100%;
    background-position: center center;
    position: relative;

}

#head {
    height: 120px;
    width: 100px;
    background-color: #66CCCC;
    text-align: center;
    position: relative;
}

#wrap .logGet {
    height: 408px;
    width: 368px;
    position: absolute;
    background-color: #FFFFFF;
    top: 100px;
    right: 15%;
}

.logC a button {
    width: 100%;
    height: 45px;
    background-color: #ee7700;
    border: none;
    color: white;
    font-size: 18px;
}

.logGet .logD.logDtip .p1 {
    display: inline-block;
    font-size: 28px;
    margin-top: 30px;
    width: 86%;
}

#wrap .logGet .logD.logDtip {
    width: 86%;
    border-bottom: 1px solid #ee7700;
    margin-bottom: 60px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
}

.logGet .lgD img {
    z-index: 9999;
    position: absolute;
    top: 10px;
    left: 8px;
}

.logGet .lgD input {
    width: 100%;
    height: 42px;
    text-indent: 2.5rem;
}

#wrap .logGet .lgD {
    width: 86%;
    position: relative;
    margin-bottom: 30px;
    margin-top: 30px;
    margin-right: auto;
    margin-left: auto;
}

#wrap .logGet .logC {
    width: 86%;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

.title {
    font-family: "宋体";
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 使用css3的transform来实现 */
    font-size: 36px;
    height: 40px;
    width: 30%;
}

.copyright {
    font-family: "宋体";
    color: #FFFFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 使用css3的transform来实现 */
    height: 60px;
    width: 40%;
    text-align: center;
}
</style>
